<template>
	<view class="container">
		<!-- 拖拽区域 -->
		<view style="position: absolute;" @click="back">
			<canvas-drag ref="canvasRef" id="canvas-drag" :graph="graph" class="canvasArea" :enableUndo="true"
				@end="end" @start="start">
			</canvas-drag>
		</view>
		<view class="submit-button">
			<view v-if="obj.type == 1 || obj.type == 2" style="width: 100%;">
				<view v-if="image1 == ''">
					<button v-if="isYiDisabled" @click="submitButton1('乙方')" class="unbackground " :loading="loading"
						type="default" :disabled="isYiDisabled">
						乙方签署合同
					</button>
					<button v-else @click="submitButton1('乙方')" class="background " :loading="loading" type="default"
						:disabled="isYiDisabled">
						乙方签署合同
					</button>
				</view>
				<view v-if="image1">
					<!--   -->
					<button @click="saveSubmitButton" class="background" :disabled="disabledOne" :loading="loading"
						style="margin-top: 20rpx;">
						上传合同
					</button>
				</view>
			</view>
			<view v-if="obj.type == 3 || obj.type == 4" style="width: 100%;">
				<view v-if="image1 == ''">
					<button v-if="isYiDisabled" @click="submitButton1('乙方')" class="unbackground " :loading="loading"
						type="default">
						乙方签署合同
					</button>
					<button v-else @click="submitButton1('乙方')" class="background " :loading="loading" type="default">
						乙方签署合同
					</button>
				</view>
				<!-- -->
				<button @click="submitButton2('监护人')" class="background " :loading="loading" style="margin-top: 20rpx;"
					type="default" v-if="bType === '乙方'">
					监护人签署合同
				</button>
				<view v-if="image1 && image2">
					<!---->
					<button class="background" @click="saveSubmitButton" :disabled="disabledOne" :loading="loading"
						style="margin-top: 20rpx;">
						上传合同
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CanvasDrag from "../canvas-drag/index.vue"
	export default {
		components: {
			CanvasDrag
		},
		data() {
			return {
				isYiDisabled: false, //乙方按钮是否打开
				loading: false,
				graph: {}, //签名子组件的相关数据
				show: false,
				canvasBg: "",
				disabledOne: false, //是否禁止保存合同按钮
				disabledTwo: false, //是否禁止完成按钮
				disabled: true, //完成按钮默认禁止,
				image1: '',
				image2: '',
				hetong: '',
				src: '',
				uid: '', //用户uid
				userInfo: '', //用户信息
				user_type: '', //用户类型
				startShow: false, //是否有开始移动签名模块
				obj: '', //传递过来的弹窗相关内容
				file: '',
				bType: ''
			}
		},
		mounted() {

		},
		onLoad(options) {
			if (options.obj) {
				this.obj = JSON.parse(options.obj);
			}
			console.log('获取obj', this.obj)
			let userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo,
				this.uid = userInfo ? userInfo[0].id : '',
				this.user_type = userInfo.user_type
			this.onChangeBgImage() //获取合同模板
		},
		created() {},
		onShow() {
			this.loading = false;
			if ('' !== this.image1) {
				this.startShow = true;
				this.disabledOne = false;
				this.addImag1();
			}

			if ('' !== this.image2) {
				this.startShow = true;
				this.disabledOne = false;
				this.addImag2();
			}
		},
		methods: {
			addImag1: function() {
				console.log('是否调用这个函数了', this.image1)
				this.setData({
					graph: {
						w: 80,
						h: 25,
						type: 'image',
						status: 0, //用来判断签名位置
						url: this.image1
					}
				});
			},
			addImag2: function() {
				console.log('是否调用这个函数了222', this.image2)
				this.setData({
					graph: {
						w: 80,
						h: 25,
						type: 'image',
						status: 1, //用来判断签名位置
						url: this.image2
					}
				});
			},
			start: function(e) {
				this.startShow = true //开放保存按钮
				this.disabledOne = false //开放保存按钮
				console.log('获取当前开始时候的坐标点', e)
			},
			end: function(e) {
				console.log('获取当前结束时候的坐标点', e)
			},
			back: function() {
				console.log('背景')
			},
			// 签署
			nextChange: function() {
				console.log('签署了')
				uni.navigateTo({
					url: '../../componentsA/backTop/index'
				})
			},
			// 乙方签署合同事件
			submitButton1: function(e) {
				console.log('sadfdsa ', e)
				var that = this;
				uni.showModal({
					title: '确认签订该合同吗',
					content: '是否继续',
					success: function(a) {
						if (a.confirm) {
							that.loading = true;
							uni.navigateTo({
								url: '../../componentsA/backTop/index?type=' + that.obj.type +
									'&bType=' + e
							});
						} else {
							a.cancel;
						}
					}
				});
			},
			submitButton2: function(e) {
				console.log('sadfdsa 1111', e)
				this.bType = '乙方';
				var that = this;
				uni.showModal({
					title: '确认签订该合同吗',
					content: '是否继续',
					success: function(a) {
						if (a.confirm) {
							that.loading = true;
							uni.navigateTo({
								url: '../../componentsA/backTop/index?type=' + that.obj.type +
									'&bType=' + e
							});
						} else {
							a.cancel;
						}
					}
				});
			},
			// 完成
			submitButton: function() {
				uni.showModal({
					title: '确认签订该合同吗',
					content: '是否继续',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "../../componentsA/backTop/index" //签订电子合同
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onUndo: function(event) { //后退
				this.$refs.canvasRef.undo();
			},
			// 获取合同模板
			onChangeBgImage: function() {
				console.log('获取合同模板传递的参数', this.obj.type, this.user_type)
				var that = this;
				uni.request({
					method: 'POST',
					url: 'https://jizhang.xqyu.cn/index.php/api/index/get_attachfile',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						user_type: that.user_type,
						title: that.obj.type
					},
					success: function(res) {
						that.loading = false;
						that.file = res.data.data.file;
						that.downFileRequest(res.data.data.file);
					},
					fail: function(n) {
						that.$.toast(n);
					}
				});
			},
			downFileRequest: function(e) {
				var that = this;
				this.$.tipLoading('获取合同模板中');
				that.loading = true;
				uni.request({
					method: 'POST',
					url: 'https://jizhang.xqyu.cn/index.php/api/index/downfile',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						fileurl: e,
						user_type: that.user_type,
						uid: that.uid,
						type: 2,
						h_name: that.obj.h_name ? that.obj.h_name : '',
						y_phone: that.obj.y_phone ? that.obj.y_phone : '',
						j_phone: that.obj.j_phone ? that.obj.j_phone : '',
						y_idcard: that.obj.y_idcard ? that.obj.y_idcard : '',
						h_idcard: that.obj.h_idcard ? that.obj.h_idcard : '',
						j_idcard: that.obj.j_idcard ? that.obj.j_idcard : '',
						h_account: that.obj.h_account ? that.obj.h_account : '',
						h_deposit: that.obj.h_deposit ? that.obj.h_deposit : '',
						y_nickname: that.obj.y_nickname ? that.obj.y_nickname : '',
						j_nickname: that.obj.j_nickname ? that.obj.j_nickname : '',
						y_address: that.obj.y_address ? that.obj.y_address : '',
						j_address: that.obj.j_address ? that.obj.j_address : '',
						y_email: that.obj.y_email ? that.obj.y_email : '',
						j_email: that.obj.j_email ? that.obj.j_email : ''
					},
					success: function(e) {
						console.log('eeeeeeee', e)
						that.loading = false;
						that.$.hideLoading();
						var a = e.data.data;
						uni.getImageInfo({
							src: a,
							success: function(n) {
								console.log('最终是否获取成功模板了', n)
								if (n.path == "" || n.path === "null" || n.path == null || n
									.path == {}) {
									that.$.toast('没有获取到合同模板。请联系后台管理员');
									that.loading = false;
									that.isYiDisabled = true
									return
								} else {
									that.isYiDisabled = false
									var e = n.path;
									that.$refs.canvasRef.changeBgImage(e);
								}
							},
							fail: function(n) {}
						});
					},
					fail: function(n) {
						that.$.toast(n);
					}
				});
			},
			// 上传合同
			saveSubmitButton: function() {
				var that = this;
				uni.showModal({
					title: '确认上传合同吗',
					content: '是否继续',
					success: function(t) {
						if (t.confirm) {
							that.loading = true;
							that.$.tipLoading('合同上传中...');
							that.$refs.canvasRef.exportFun().then(function(t) { //插件里的方法
									uni.getImageInfo({
										src: t,
										success: function(t) {
											var a = t.path;
											uni.uploadFile({
												url: 'https://jizhang.xqyu.cn/index.php/api/index/upload',
												filePath: a,
												name: 'file',
												formData: {
													uid: that.uid,
													user_type: that.user_type,
													file: a,
													file_type: 5
												},
												success: function(t) {
													that.loading = false;
													that.$.hideLoading();
													var a = JSON.parse(t.data);
													if (1 == a.code) {
														that.$.successToast(a
															.msg);
														setTimeout(function() {
															uni.navigateBack({
																delta: 3
															});
														}, 2000);
													} else {
														that.$.toast(a.msg);
													}
												}
											});
										},
										fail: function(n) {
											that.$.toast(n);
										}
									});
								})
								.catch(function(n) {
									console.error(n);
								});
						} else {
							t.cancel;
						}
					}
				});
			}
			/**
			 * 保存合同。导出合成图片
			 */
			// saveSubmitButton() {
			// 	console.log('导出图片了')
			// 	uni.canvasToTempFilePath({
			// 		canvasId: "canvas-drag",
			// 		success: (res) => {
			// 			console.log('保存合同生成图片了', res)

			// 		}
			// 	})
			// 	// this.$refs.canvasRef.exportJson().then(filePath => {
			// 	//   console.log('导出图片的路径了',filePath);
			// 	// }).catch(e => {
			// 	//   console.error('导出图片了',e);
			// 	// });
			// },
			/**
			/**
			 * 导出当前画布为模板
			 */
			// saveSubmitButton() {
			// 	var that = this
			// 	if (!this.startShow) {
			// 		this.$.toast('请先将签名移至正确位置处')
			// 	} else {
			// 		uni.showModal({
			// 			title: '确认保存合同吗',
			// 			content: '是否继续',
			// 			success: function(res) {
			// 				if (res.confirm) {
			// 					that.$refs.canvasRef.exportFun().then(filePath => {
			// 						console.log('最终导出的模板', filePath);
			// 						uni.getImageInfo({//获取图片信息
			// 							 src: filePath,
			// 							 success: result=> {
			// 								 console.log('获取图片信息获取图片信息获取图片信息',result)
			// 								 uni.saveImageToPhotosAlbum({//合成图片  此处的合成图片传递的刘静必须获取图片信息的结果里的路径。否则会不生效
			// 									  filePath: result.path,
			// 									  success: function(saveSuccess) {
			// 											console.log('save success',saveSuccess);
			// 											 uni.showModal({
			// 												  title: '保存成功',
			// 												  content: '图片已成功保存到相册，快去分享到您的圈子吧',
			// 												  showCancel: false
			// 											 });
			// 									  },
			// 									  complete(res) {
			// 											console.log(res);
			// 									  }
			// 								 });
			// 							 },
			// 							 fail(modalSuccess) {
			// 							 	that.$.toast(modalSuccess)
			// 							 }
			// 						})
			// 						// that.$.tipLoading('合同保存中')
			// 						// setTimeout(function() {
			// 						// 	that.$.hideLoading()
			// 						// 	that.$.toast('合同保存成功')
			// 						// }, 1500)
			// 					}).catch(e => {
			// 						console.error(e);
			// 					});
			// 				} else if (res.cancel) {
			// 					console.log('用户点击取消');
			// 				}
			// 			}
			// 		});
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-around;
		padding-bottom: 100rpx;
		width: 100%;
	}

	.btn {
		border: 1px solid #dfdfdf;
		border-radius: 10rpx;
		float: left;
		margin: 10rpx;
		padding: 10rpx 20rpx;
	}

	.canvasArea {
		width: 100%;
	}

	.submit-button {
		background-color: #ececec;
		bottom: 0;
		display: flex;
		padding: 20rpx 20rpx 30rpx;
		position: fixed;
		width: 100%;
		z-index: 19999;
	}

	.submit-button button {
		border-radius: 15rpx;
		font-size: 28rpx;
		font-weight: 700;
	}

	.submit-button .button-one {
		background-color: #fff;
		color: #136cfa !important;
		flex: 4;
		margin-right: 20rpx;
	}

	.submit-button .button-two {
		background-color: #e1e2e4;
		border-radius: 15rpx;
		color: #a9a9a9;
		flex: 6;
	}

	.submit-button .newColor {
		color: #80a7fb !important;
		opacity: 0.9 !important;
	}

	.submit-button .background {
		background: linear-gradient(159deg, #80e6fc, #0051ff 99%) !important;
		color: #fff !important;
	}

	.submit-button .unbackground {
		background: linear-gradient(159deg, #e1e2e4, #a9a9a9 99%) !important;
		color: #fff !important;
	}
</style>
